<template>
  <div class="register">
    <TopAction fixed :show="[0, 2]" />
    <Back />
    <p>
      忘记密码
    </p>
    <CustomInput v-model.lazy="params.phone" textType="number" placeholder="请输入手机号码" :max="11" />
    <CountDown :max="6" :type="1" :phone="params.phone" v-model="params.code" />

    <PassWord v-model="params.p" placeholder="请输入6-10位新密码" :max="6" />
    <PassWord v-model="params.a" placeholder="请再次输入密码" style="margin-top: 12px;" :max="6" />
    <SubmitButton text="修改" style="margin-top: 40px;" @submit="submit" />
  </div>
</template>
<script>
import PassWord from '@/components/Login/PassWord.vue';
import { defineComponent, reactive, ref } from 'vue';
import CustomInput from '@/components/Login/CustomInput.vue';
import CountDown from '@/components/Login/CountDown.vue'
import SubmitButton from '@/components/Login/SubmitButton.vue';
import Back from '@/components/Login/Back.vue';
import TopAction from '@/components/TopAction.vue';
import { useRouter } from 'vue-router';
import { useRequest } from 'vue-hooks-plus';
import { ElMessage } from 'element-plus'
import { setPassWord } from '@/server/login'
export default defineComponent({
  components: {
    CustomInput,
    CountDown,
    SubmitButton,
    Back,
    TopAction,
    PassWord
  },
  setup () {
    const router = useRouter()

    const params = reactive({
      phone: "",
      type: 1,
      code: "",
      a: '',
      p: ""
    })

    const { run: submit, loading } = useRequest(() => {
      const data = {
        code: params.code,
        phone: params.phone,
        password: params.p
      }
      if (params?.code === "") {
        return Promise.reject({
          type: 'error',
          msg: '请输入验证码',
        })
      }
      if (params?.phone === "") {
        return Promise.reject({
          type: 'error',
          msg: '请输入手机号',
        })
      }
      if (params.p === '' || params.a === '') return Promise.reject({
        type: "warning",
        msg: '请输入密码'
      })
      if (params.p !== params.a) {
        return Promise.reject({
          type: "warning",
          msg: '两次密码不一致'
        })
      }
      return setPassWord(data)
    }, {
      onSuccess: res => {
        if (res?.code === 500) {
          ElMessage({
            type: 'error',
            message: res?.msg,
            center: true,
          })
        } else {
          ElMessage({
            type: 'success',
            message: res?.msg,
            center: true,
          })
          setTimeout(() => {
            router.replace('/login')
          }, 1000);
        }
      },
      manual: true,
      onError: res => {
        ElMessage({
          type: res?.type,
          message: res?.msg,
          center: true
        })
      },
    })
    return {
      submit,
      params
    }
  }
})
</script>

<style scoped lang="less">
.register {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  background-color: #fff;

  >p {
    font-size: 20px;

    font-weight: 500;
    color: #242424;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 123px;
    margin-bottom: 40px;

    >span {
      margin-bottom: 10px;
    }
  }
}
</style>
